<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/ll.css">
    <style>
        .statistics{
            float: left;
            color: black;
            border：1px solid black;
            width:600px;
            font-size:28px;

        }
        .statistics div:first-child{
            text-align: center;
            /*border：2px solid black;*/

        }
        
        .statistics div{

           border: 1px solid black;
        	
        }
        #ichart-render{
            float: left;
        }
    </style>
</head>
<body >
<div class="header">
    <div class="header_left">商户管理平台</div>
    <div class="header_right">
        <div class="header_right_user" style="margin-right: 20px;"></div>
        <!--<div class="header_right_user">欢迎 1234567 登录商户管理平台</div>-->
        <div style="padding-right: 20px;">
            <%= (new java.util.Date()).toLocaleString()%>
        </div>
    </div>
    <div class="content_left">
        <div class="content-supervise-top"></div>
        <a href="main" class="content-supervise">账单管理</a>
        <a href="ff" class="content-supervise">数据统计</a>

    </div>
    <div class="statistics">
        <div>商户金额统计</div>
        <div  class="alipay">支付宝总额:50.00 元</div>
        <div class="swipe">刷卡总额:60.00 元</div>
        <div class="wxpay">微信支付总额:70.00 元</div>
    </div>
    <div id='ichart-render'></div>

</div>
</body>
<script src="js/jq.js" ></script>
<script src="js/ichart.js" ></script>
<script>
    function whole(){
        $.ajax({
            url: 'http://localhost:8080/helipay.api.web/merchantList',
            type: 'POST',
//            data: param,
            dataType: 'json',
            success: function(data) {
               console.log(data.result)
            },
            error: function(err) {
                console.log(err);
                alert("连接服务器失败！请重新提交！")
            }
        });
    }
    whole();


</script>
<script type='text/javascript'>
    $(function(){
        var chart = iChart.create({
            render:"ichart-render",
            width:1000,
            height:500,
            background_color:"#fefefe",
            gradient:false,
            color_factor:0.2,
            border:{
                color:"BCBCBC",
                width:1
            },
            align:"center",
            offsetx:0,
            offsety:0,
            sub_option:{
                border:{
                    color:"#BCBCBC",
                    width:1
                },
                label:{
                    fontweight:500,
                    fontsize:11,
                    color:"#4572a7",
                    sign:"square",
                    sign_size:12,
                    border:{
                        color:"#BCBCBC",
                        width:1
                    },
                    background_color:"#fefefe"
                }
            },
            shadow:true,
            shadow_color:"#666666",
            shadow_blur:2,
            showpercent:false,
            column_width:"70%",
            bar_height:"70%",
            radius:"90%",
            title:{
                text:"商户金额统计图",
                color:"#111111",
                fontsize:20,
                textAlign:"center",
                font:"微软雅黑",
                height:30,
                offsetx:0,
                offsety:0
            },
            subtitle:{
                color:"#111111",
                fontsize:16,
                textAlign:"center",
                font:"微软雅黑",
                height:20,
                offsetx:0,
                offsety:0,
                text:""
            },
            footnote:{
                color:"#111111",
                fontsize:12,
                textAlign:"right",
                font:"微软雅黑",
                height:20,
                offsetx:0,
                offsety:0,
                text:""
            },
            legend:{
                enable:false,
                background_color:"#fefefe",
                color:"#333333",
                fontsize:12,
                border:{
                    color:"#BCBCBC",
                    width:1
                },
                column:1,
                align:"right",
                valign:"center",
                offsetx:0,
                offsety:0
            },
            coordinate:{
                width:"80%",
                height:"84%",
                background_color:"#ffffff",
                axis:{
                    color:"#a5acb8",
                    width:[1,"",1,""]
                },
                grid_color:"#d9d9d9",
                label:{
                    fontweight:500,
                    color:"#666666",
                    fontsize:11
                }
            },
            label:{
                fontweight:500,
                color:"#666666",
                fontsize:11
            },
            type:"pie2d",
            data:[
                {
                    name:"微信支付",
                    value:20,
                    color:"#4572a7"
                },{
                    name:"刷卡",
                    value:30,
                    color:"#aa4643"
                },{
                    name:"支付宝支付",
                    value:40,
                    color:"#89a54e"
                }
            ]
        });
        chart.draw();
    });
</script>

</html>
